import { useEffect, useRef, useState } from "react";
import { useRequest } from 'ahooks'
import { Toast, InfiniteScroll } from "antd-mobile";
import { useSelector } from "react-redux";
import MoreHeader from "./components/MoreHeader";
import { findPlayingId } from "../../store/reducer/songSlice";
import { getChapterList, getSongList } from "../../api/api/selectPageList";
import src from './assets/a.jpg'
import test from './assets/test.jpg'
import TopSongList from "./components/SongList";

function SelectChapterPage() {

    const pageNumRef = useRef(0)
    const [songDataTotal, setSongDataTotal] = useState([])
    const [hasMore, setHasMore] = useState(true);
    const handler = useRef()

    const {
        data,
        loading
    } = useRequest(getChapterList);
    const playingId = useSelector(findPlayingId);
    useEffect(() => {
        if (loading) {
            handler.current = Toast.show({
                icon: 'loading',
                duration: 0
            })
        } else {
            handler.current?.close()
        }
    }, [loading])
    return (
        <div className="w-full h-full pt-[24px] z-99 pl-[24px]  text-gray-50  font-normal">
            <div className="text-[24px] mb-[24px]">Discover</div>
            <div className="w-[352px] h-[138px]">
                <MoreHeader title="角色相关"></MoreHeader>
                <div className="mt-[16px] flex justify-between">
                    {
                        data && data.characterList?.map(({
                            characterName
                        }) => {
                            return (
                                <div >
                                    <div className="w-[74px] h-[74px] rounded-[10px]">
                                        <img className="object-cover size-[100%] rounded-[10px]" src={test}></img>
                                    </div>
                                </div>)
                        })}
                </div>
            </div>
            <div className="mt-[10px]">
                <div className="text-[20px] leading-[20px]">章节列表</div>
                <div className="mt-[16px]">
                    <div className="flex overflow-x-scroll ">
                        {
                            data && data?.chapterList?.map(({
                                chapterNum,
                                chapterName
                            }) => {
                                return (
                                    <div className="mr-[16px]">
                                        <div className="w-[140px] h-[140px] rounded-[20px]">
                                            <img className="object-cover size-[100%] rounded-[20px]" src={src}></img>
                                        </div>
                                        <div className="text-[14px] mt-[8px] text-gray-50  font-normal leading-[18px]">{chapterNum}</div>
                                        <span className="mt-[2px] text-[12px] font-medium text-gray-300">{chapterName}</span>
                                    </div>
                                )
                            })}
                    </div>
                </div>
            </div>
            <div className="w-[352px] mt-[24px]">
                <MoreHeader title="最热歌曲" className="mb-[20px]"></MoreHeader>
                <TopSongList songListData={songDataTotal} playingId={playingId} listId={"1111"} ></TopSongList>
                <InfiniteScroll loadMore={async () => {
                    const res = await getSongList({
                        pageNum: pageNumRef.current + 1,
                        pageSize: 10
                    })
                    setSongDataTotal([...songDataTotal, ...res.topSongList])
                    pageNumRef.current++
                    setHasMore(pageNumRef.current < 10)
                }} hasMore={hasMore} ></InfiniteScroll>
            </div>
        </div>
    )
}

export default SelectChapterPage;